<template>
  <div>
      <header>
        <div v-for="(v,i) in this.$store.state.mym.arr" :key="i" class="header">
        <div class="header_left" @click="per()">
          <img class="use_img" :src="v.head" alt="">
          
          <span v-if="!login" class="use_name">请先登录&nbsp;&gt;</span>
          <span v-else class="use_name">{{username}}&nbsp;&gt;</span>
        </div>

          <!-- {{v.coffee[0].coffee_first_price}} -->
        
          <!-- <span class="use_name">{{v.nickname}}&nbsp;&gt;</span> -->
          <!-- <span class="use_name">{{v.coffee[0].coffee_first_price}}&nbsp;&gt;</span> -->
        </div>

        <div class="header_right">
          <img src="myimg/xinxi.png" alt="" @click="message()">
        </div>
        <!-- </div> -->


      </header>
      <div class="nav">
        <div>

        <ul>
       <li @click="funf()">
         <span><img src="myimg/ding01.png" alt=""></span>
         <p>我的订单</p>
       </li>
       <li @click="funb()">
         <span><img src="myimg/ding02.png" alt=""></span>
         <p>咖啡钱包</p>
       </li>
       <li @click="func()">
         <span><img src="myimg/ding03.png" alt=""></span>
         <p>优惠券</p>
       </li>
       <li @click="funcards()">
         <span><img src="myimg/ding04.png" alt=""></span>
         <p>礼品卡</p>
       </li>
       <li @click="fune()">
         <span><img src="myimg/ding05.png" alt=""></span>
         <p>招商加盟</p>
       </li>
       </ul>
        
        </div>

        <div  v-show="bool">

        <ul >
          <li @click="funa()">
            <img src="myimg/ding06.png" alt="">
            <p>账户余额</p>
          </li>
           <li @click="funfp()">
            <img src="myimg/ding07.png" alt="">
            <p>发票管理</p>
          </li>
           <li>
            <img src="myimg/ding08.png" alt="">
            <p>兑换优惠</p>
          </li>
           <li>
            <img src="myimg/ding09.png" alt="">
            <p>超级权益</p>
          </li>

          <li @click="help()">
            <img src="myimg/ding10.png" alt="">
            <p>帮助反馈</p>
          </li>
          
        </ul>
        </div>
        <div @click="fund()">
          
           <van-icon name="arrow-up" class="bot" v-if="bool"/>
           <van-icon name="arrow-down" class="top" v-else/>
        </div>  
      </div>

      <div class="benefit">
        <p class="benefit_one" >
          <img @click="funp()" src="myimg/nine.png" alt=""/>
        </p>
        <p class="benefit_two" >
          <img @click="funw()" src="myimg/fuli.png" alt=""/>
        </p>
      </div>
  </div>
</template>

<script>
// import {postlink} from "@/api/postapi.js"
export default {
  
  mounted(){
    // get传参
    this.$store.dispatch("mymData",{url:"/data/usemsg"});
    // this.$store.dispatch("mymData",{url:"http://81.68.226.70:8050/coffee/"});

    // 设置post参数并且解析参数

    // let usp=new URLSearchParams()

    // usp.append("postid",9999)
    // postlink("/api/ceshi/post",usp).then((ok)=>{
    //         console.log(ok)
    //     })
    



  },
  data(){
    return{
      bool:false,
      login:false,
      username : ""
    }
    
  },
  created(){
    this.login=window.localStorage.getItem("login")
    if(this.login){
      this.username=window.localStorage.getItem("username")
    }
    
  },
  methods:{
    funa(){
      this.$router.push("/my_user_balance")
    },
    fund(){
      this.bool=!this.bool
    },
    funf(){
          this.$router.push("/myordersona")
        this.$router.push("/myorder")
    },
    funb(){
        this.$router.push("/mycoffee")
    },
    func(){
        this.$router.push("/mydiscount")
    },
    funh(){
        this.$router.push("/mygife")
    },
    funcards(){
        this.$router.push("/cards")
    },
    fune(){
        this.$router.push("/myrecruit")
    },
    per(){
        
          if(window.localStorage.getItem("token")!=null&& window.localStorage.getItem("token")!=undefined){
            this.$router.push("/myperson")
          }else{
              this.$router.push("/loginfirst")
          }
    },
    funp(){
      this.$router.push("/Myfriend")

    },
    funw(){
      this.$router.push("/Myweek")
    },
    funfp(){
        this.$router.push("/invoice")
    },
    message(){
      this.$router.push("/smart")
    },
    help(){
      this.$router.push("/helpfirst")
    },

  }

}
</script>

<style scoped>
header{
    width: 3.75rem;
    margin: auto;
    height: 1.32rem;
    background: #343993;
    display: flex;
    justify-content: space-between;
      /* margin-bottom: 0.08rem; */
}
.header{
    width: 3.75rem;
    margin: auto;
    height: 1.32rem;
    background: #343993;
    display: flex;
    justify-content: space-between;
  

}
.header_left{
  margin-top: 0.5rem;
  /* height: 0.6rem; */

}
.header_left img{
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.3rem;
  margin-left: 0.2rem;
  vertical-align: middle;
  
}
.header_left span{
  display: inline-block;
  /* border: 1px solid white; */
  height: 0.3rem;
  line-height: 0.3rem;
  color: white;
  font-size: 0.22rem;
  margin-left: 0.1rem;
}
.header_right{
  margin-top: 0.5rem;
}

.nav{
  width: 3.56rem;
  /* height: 1.3rem; */
  /* border: 1px solid gray; */
  margin: auto;
  background: #ffffff;
}
.nav .top,.bot{
  width: 3.56rem;
  text-align: center;
  font-size: 0.2rem;
  color: gray;
}
.nav ul{
  width: 3.56rem;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 0.1rem;
  /* margin: auto; */
}
.nav li{
  width: 20%;
}
.nav ul li img{
  width: 0.5rem;
  height: 0.5rem;
}
.benefit{
  background-color: #f5f5f5;
  width: 3.58rem;
  /* height: 1.3rem; */
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.benefit_one,.benefit_two{
  margin-top: 0.02rem;
  width: 3.58rem;
  height: 0.85rem;
  margin-bottom: 0.1rem;
  /* border: 1px solid gray; */
  margin: auto;
}
.benefit_one img{
  width: 3.58rem;
  height: 0.8rem;

}
.benefit_two img{
  width: 3.58rem;
  height: 0.8rem;
  

}

</style>